<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
            <a-form size="small" :model="query" layout="inline">
                <a-form-item label="月份" prop="beginDate">
                    <a-month-picker v-model="query.beginDate" :style="{ width: '180px' }" placeholder="选择日期"
                        class="bacClass" />
                </a-form-item>
                <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
                <!-- <a-form-item label="厂区" prop="planOrderCode">
            <a-input allow-clear :style="{ width: '180px' }" class="bacClass" v-model="query.planOrderCode" />
          </a-form-item> -->
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                    <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <a-tabs   :lazy-load="true" :justify="true" :default-active-key="1" @change="aTabsChanges">
            <a-tab-pane :key="1" title="各织厂在岗率走势图" style="width: 100%; height: 100%">
                <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
                    <div style="width: 100%; height: 100%">
                        <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane :key="2" title="织造中心人员在岗率统计表（汇总）" style="width: 100%; height: 100%">
                <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
                    <div style="width: 100%; height: 100%">
                          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:100%"
                            :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                            :columnDefs="tc">
                        </AgGridVuesCopys>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane :key="3" title="织造中心管理人员在岗率统计表（汇总）" style="width: 100%; height: 100%">
                <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
                    <div style="width: 100%; height: 100%">
                          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:100%"
                            :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList2"
                            :columnDefs="tc2">
                        </AgGridVuesCopys>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane :key="4" title="织造中心班组在岗率统计表（汇总）" style="width: 100%; height: 100%">
                <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
                    <div style="width: 100%; height: 100%">
                          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:100%"
                            :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList3"
                            :columnDefs="tc3" :localeText="localeText1">
                        </AgGridVuesCopys>
                    </div>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
    
<script lang="ts" setup>

import * as echarts from 'echarts'

import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { localeText } from '@/api/aggridZw'
const localeText1: any = ref(localeText)
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)


const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
}

interface Querin {
    beginDate: any
    planOrderCode: string
}
//getlist初始化接口参数
let query = reactive<Querin>({
    beginDate: dayjs().format('YYYY-MM'), //当月日期
    planOrderCode: '',
})

const tableDataList: any = ref([])
const tableDataList2: any = ref([])
const tableDataList3: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1
}

const tc = [
    {
        headerName: '织厂单位',
        field: 'firm',
        width: 100
    },
    {
        headerName: '月份',
        field: 'monthDate',
        width: 100
    },
    {
        headerName: '定编人数',
        field: 'quotaNumber',
        width: 100
    },
    {
        headerName: '在编人数',
        field: 'entryNumber',
        width: 100
    },
    {
        headerName: '缺编人数',
        field: 'lackOfNumber',
        width: 100
    },
    {
        headerName: '在岗率(%)',
        field: 'entryRate',
        width: 100
    },
]
const tc2 = [
    {
        headerName: '岗位',
        field: 'post',
        width: 100
    },
    {
        headerName: '织厂单位',
        field: 'post',
        width: 100
    },
    {
        headerName: '月份',
        field: 'monthDate',
        width: 100
    },
    {
        headerName: '定编人数',
        field: 'quotaNumber',
        width: 100
    },
    {
        headerName: '在编人数',
        field: 'entryNumber',
        width: 100
    },
    {
        headerName: '缺编人数',
        field: 'lackOfNumber',
        width: 100
    },
    {
        headerName: '在岗率(%)',
        field: 'entryRate',
        width: 100
    },
]
const tc3 = [
    {
        headerName: '班别',
        field: 'department',
        width: 100
    },
    {
        headerName: '织厂单位',
        field: 'post',
        width: 100
    },
    {
        headerName: '月份',
        field: 'monthDate',
        width: 100
    },
    {
        headerName: '定编人数',
        field: 'quotaNumber',
        width: 100
    },
    {
        headerName: '在编人数',
        field: 'entryNumber',
        width: 100
    },
    {
        headerName: '缺编人数',
        field: 'lackOfNumber',
        width: 100
    },
    {
        headerName: '在岗率(%)',
        field: 'entryRate',
        width: 100
    },
]

const option = ref(
    {
        title: {
            text: '各织厂在岗率走势图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            left: "92%",
            top: "18%",
            align: "left",
            data: ['定编人数', '在编人数', '缺编人数', '在岗率']
        },
        grid: {
            left: '3%',
            right: '8%',
            bottom: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisTick: { show: false },
            data: ['一厂', '二厂', '三厂', '四厂', '五厂']
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '定编人数',
                type: 'bar',
                data: [320, 332, 301, 334, 390],
                label: { show: true, position: "top", distance: 10,formatter: '{c}%' }
            },
            {
                name: '在编人数',
                type: 'bar',
                data: [150, 232, 201, 154, 190],
                label: { show: true, position: "top", distance: 10,formatter: '{c}%' }
            },
            {
                name: '缺编人数',
                type: 'bar',
                data: [98, 77, 101, 99, 40],
                label: { show: true, position: "top", distance: 10,formatter: '{c}%' }
            },
            {
                name: '在岗率',
                type: 'bar',
                data: [98, 77, 101, 99, 40],
                label: { show: true, position: "top", distance: 10,formatter: '{c}%' }
            },
        ]
    }
)

//初始化
onMounted(async () => {
    selectJt()
})
const myChart: any = ref()
const states = () => {
   return echarts.init(myChart.value!)
}

function selectJt() {
    post({
        url: 'org/report/factoryEntryRate',
        data: {
            "firmId": query.planOrderCode, //公司ID
            "monthDate": query.beginDate //日期时间
        }
    }).then((res: any) => {
        if (res.code == 200) {
            option.value.xAxis.data = res.data.firmData.map((v:any)=>{
                return v.firm
            })
            option.value.series[0].data = res.data.firmData.map((v:any)=>{
                return v.quotaNumber
            })
            option.value.series[1].data = res.data.firmData.map((v:any)=>{
                return v.entryNumber
            })
            option.value.series[2].data = res.data.firmData.map((v:any)=>{
                return v.lackOfNumber
            })
            option.value.series[3].data = res.data.firmData.map((v:any)=>{
                return v.entryRate
            })
            tableDataList.value = res.data.firmData
            tableDataList2.value = res.data.postData
            tableDataList3.value = res.data.departmentData
            const state = states()
            state.setOption(option.value)
        } else {
            Message.error(res.message)
        }
    })
}

const aTabsChanges = () => {

}

const getList = () => {
    selectJt()
}
</script>
<style scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
    